<template lang="html">
    <div class="">
        <router-link tag="div" to= "/" class="header-abs" v-show="showAbs">
                <span class="iconfont header-abs-back">&#xe624;</span>
        </router-link>
        <div class="header-fixed"   v-show="!showAbs" :style="opacityStyle">
            <router-link tag="div" to= "/" class="header-fixed" >
                    <span class="iconfont header-fixed-back">&#xe624;</span>
                        京东详情1
            </router-link>

        </div>
    </div>

</template>

<script>
export default {
	name: 'DetailHeader',
	data() {
		return {
			showAbs: true,
			opacityStyle: {
				opacity: 0
			}
		}
	},
	methods: {
		handleScroll() {
			alert(10)
			const top = document.documentElement.scrollTop
			if (top > 60) {
				let opacity = top / 140;
				opacity = opacity > 1 ? 1 : opacity
				this.opacityStyle = {
					opacity
				}
				this.showAbs = false
			} else {
				this.showAbs = true

			}
		}
	},
	activated() {
		window.addEventListener('scroll', this.handleScroll)
	},
	dactivated() {
		window.removeEventListener('scroll', this.handleScroll)
	}

}
</script>

<style lang="scss" scoped>
@import '~scss/varibles';
.header-abs {
    position: absolute;
    left: 0.2rem;
    top: 0.2rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.4rem;

    .header-abs-back {
        color: #fff;
        text-align: center;
    }
}
.header-fixed {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: $headerHeight;
    line-height: $headerHeight;
    overflow: hidden;
    text-align: center;
    color: #fff;
    background: $bgColor;
    font-size: 0.32rem;
    .header-fixed-back {
        position: absolute;
        color: #fff;
        top: 0;
        left: 0;
        width: 0.64rem;
        text-align: center;
        font-size: 0.4rem;
    }
}
</style>
